<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <!-- 插值语法  在DOM元素中渲染数据
                写在标签内部 语法 <p> {{JS数据或JS表达式}} </p>
            -->

            <!-- 指令语法  绑定在元素属性上
                v-bind 单向数据绑定  用法 v-bind:value="JS数据" 可简写为 :value="JS数据"
                v-model 双向数据绑定，多用于表单收集数据  v-model="JS数据"
                v-on 绑定DOM事件 v-on:click.prevent="JS函数名" 可简写为  @click="JS函数名"
                v-if v-else-if v-else 
                v-show  控制元素的显示或隐藏 
                v-for 遍历展示数据  v-for="(item,index) in 被遍历的对象  " ：key = 'item.id'
            -->
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                // 配置对象
                // 放非函数的数据
                data:{
                    text:"abc",
                },
                // 函数数据
                methods:{},
                // 监视属性，监控数据变化,一旦数据发生变化就是触发函数
                watch:{},
                // 计算属性，依赖的数据发生变化就会重新计算
                computed:{}
            });
            vm.$mount("#app");
        </script>
    </body>
</html>